<template>
    <div class="BillingResendBatch topStyley">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类--批量补寄账单</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div class="tab-header">
                    <div class="headerTitles">批量补寄账单</div>
                </div>
                <div>
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CATEGORY}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="text_center width30">
                                    <el-form-item label="主卡卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNBR}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30" prop="EMAIL">
                                    <el-form-item label="EMAIL:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.EMAIL}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="text_center width30">
                                    <el-form-item label="帐单地址:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.SADDTYPEVlaue}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="账单递送方式:" class="text_fl" prop="STMTTYPE">
                                        <el-select
                                            v-model="formData.STMTTYPE"
                                            placeholder="请选择递卡地址类型"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in STMTTYPEoptionData"
                                                :label="item.label"
                                                :value="item.code"
                                                :key="item.code"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="11">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="账单年月(YYMM):"
                                        class="text_fl"
                                        prop="BILLTERM"
                                    >
                                        <el-checkbox-group
                                            name="last12MthsList"
                                            v-model="formData.BILLTERM"
                                            :min="1"
                                        >
                                            <el-checkbox
                                                v-for="item in last12MthsList"
                                                :label="item"
                                                :key="item"
                                                @change="handelCheckboxClosecode($event,item.code)"
                                            ></el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="text_center">
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleclickForm"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                            <!-- <el-button type="primary" size="small" plain @click="addressEdit">客户地址信息修改</el-button> -->
                        </div>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="补印账单申请"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            当前账单方式是:
                            <span>{{this.formData.STMCODE_filter}}</span>
                        </p>
                        <p>
                            补印账单方式是:
                            <span>{{this.formData.STMTTYPE|isStmtType}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="getReprintBill"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <!-- <div>
                    <el-row>
                    <el-col :span="22" >
                        <div class="text_center width30">
                            <p>  卡号{{this.reprintBill_4003.CARDNBR}} 补印账单申请成功！</p>
                        </div>
                    </el-col>
                    </el-row>
                </div>-->
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import {
    closePage, getInstalmentList, getDictSelectList, getDictMappingValue,
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';
import { get_4xxx, get_3xxx } from '@/apis/getAPIClass';

export default {
    name: 'ReprintBillApplyFor',
    data() {
        return {
            formData: {
                CATEGORY: '',
                CARDNBR: '',
                EMAIL: '', // E_mail
                ADD1: '', // 账户账单地址
                BILLTERM: [], // 账单年月 yymm
                STMTTYPE: '', // 补印账单类型 账单递送方式 0=>0
                MLTYPE: '', // 账单递送方式   MLTYPE
                ADDTYPE: '', // 账单地址类型
                SADDTYPEVlaue: '', // 账单地址的值
                FEEFLAG: '1', // 补印账单是否收费 0：不收费；1：收费
                STMCODE: '', // 当前账单方式
                STMCODE_filter: '',
                selectedMths: [], // 选择的账单月份
            },
            rules: {
                BILLTERM: [{ required: true, message: '请选择打印的账单日期！' }],
                STMTTYPE: [{ required: true, message: '补印账单递送方式不能为空！' }],
                EMAIL: [{ required: true, message: 'email为空不能发送电子邮件申请!' }],
            },

            STMTTYPEoptionData: [],
            creditCard_3014: {},
            reprintBill_4003: {},
            centerDialogVisible: false,
            last12MthsList: [], // 近12个月账期
            option: 'L', //币种选项：L第一币种，I第二币种
        };
    },
    computed: {
        ...mapGetters([
            'defaultParams',
            'cardInfo_3004',
            'pinFlag',
        ]),
        isreprintBill_4003() {
            return isEmptyObject(this.reprintBill_4003);
        },
    },
    filters: {
        isStmtType: (value) => {
            value += '';
            if (value.trim() === '3') {
                return '无任何方式账单';
            } if (value.trim() === '0') {
                return '纸质账单';
            } if (value.trim() === '1') {
                return '电子账单';
            } if (value.trim() === '2') {
                return '纸质+电子';
            }
        },
    },
    mounted() {
        this.formData.CARDNBR = this.cardInfo_3004.CARDNO;
        this.getDictValue();
        this.getLast12MthsAcctPeriod(); //加载最近12个月的账期
    },
    methods: {
        async getDictValue() {
            //  账单寄送方式
            this.STMTTYPEoptionData = await getDictSelectList('BILLSND', this);
            // 账户类型
            console.log(this.cardInfo_3004.CATEGORY, 'CATEGORY');
            this.formData.CATEGORY = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this);
            await this.getCreditCardInfo();
            // 账户账单代码 stmcd STMCODE 电子邮件账单 STM-CODE STMCODE
            console.log(this.creditCard_3014.STMCODE, 'STM-CODE');
            this.formData.STMCODE_filter = await getDictMappingValue('STMCD', this.creditCard_3014.STMCODE, this);
            if ((`${this.formData.STMCODE_filter}`).trim() === '') {
                this.formData.STMCODE_filter = '无任何账单寄送方式';
            };

            this.formData.CARDNBR = this.creditCard_3014.CARDNBR;
            this.formData.EMAIL = this.creditCard_3014.EMAIL;
            // this.formData.ADD1 = this.creditCard_3014.ADD1;
            this.formData.ADDTYPE = this.creditCard_3014.ADDTYPE;
            this.setSelectValue();


        },

        // 账单地址类型 选择地址
        setSelectValue() {
            if (this.formData.ADDTYPE === 'B') {
                this.formData.SADDTYPEVlaue = this.creditCard_3014.ADD2;
            } else if (this.formData.ADDTYPE === 'F') {
                this.formData.SADDTYPEVlaue = this.creditCard_3014.ADD3;
            } else if (this.formData.ADDTYPE === 'W') {
                this.formData.SADDTYPEVlaue = this.creditCard_3014.ADD4;
            } else if (this.formData.ADDTYPE === 'H') {
                this.formData.SADDTYPEVlaue = this.creditCard_3014.ADD1;
            }
        },
        handleclickForm() {
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.centerDialogVisible = true;
                }
            });
        },
        // 补印账单是否收费 默认收费 电子账单打印小于一年时不收费（大于一年 =》无法补印24月以上的电子账单！）
        // 电子账单 需要邮箱 必填（email为空，不能发送电子邮件申请!）
        //  纸质账单 不收费 无法补寄12个月以上的纸质账单
        // submitForm(){
        // let months = this.formData.BILLTERM;
        // 6409 银行做下面的校验
        // if(this.formData.STMTTYPE ==='1' && months<=24){
        //     this.formData.FEEFLAG = '0';//不收费
        // }else{
        //     this.$alert('无法补印24月以上的电子账单！','提示')
        //     return false;
        // }
        // if(this.formData.STMTTYPE ==='0' && months<=12){
        //     this.formData.FEEFLAG = '0';//不收费
        // }else{
        //     this.$alert('无法补寄12个月以上的纸质账单!','提示'); return false;
        // }

        // },
        //

        // 3014信用卡服务方式综合查询 查字典 billsnd
        async getCreditCardInfo() {
            const defaultParamInfo = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParamInfo.body.appHead.tranCode = '3014';// 修改交易号
            defaultParamInfo.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNBR,// 卡号
            };
            await this.$post.common.transPort(defaultParamInfo).then((res) => {
                console.log(res);
                if (res.status === 200) { // 请求成功
                    const CreditCard = JSON.parse(res.data.jsonRes);
                    console.log(CreditCard, '3014信用卡服务');
                    if (CreditCard.sysHead.rspCd == '000000') { // 交易成功
                        this.creditCard_3014 = CreditCard.body.appBody;
                        // this.isShowSuccess=true;
                    } else {
                        const ErrorMessage = `错误码：${CreditCard.sysHead.rspCd} ` + `错误信息：${CreditCard.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, CreditCard.sysHead.busiName, {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },

        // 4003补印账单或密码函
        async getReprintBill() {
            var selectedmths = this.formData.BILLTERM; //账单年月数组
            console.info("============getReprintBill-selectedmths：", selectedmths);
            for (let index = 0; index < selectedmths.length; index++) {
                const element = selectedmths[index] + "";
                var billDate = element.substr(2, 4);
                await this.transPort4003(billDate);

            }

            const successMessage = `补印账单申请成功！`;
            const ts = `提示`;
            this.$alert(successMessage, ts, {
                customClass: 'success', type: 'success',
            });
        },

        async transPort4003(billDate) {
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4003';// 修改交易号
            defaultParams.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNBR,
                BILLTERM: billDate, //账单年月
                FEEFLAG: this.formData.FEEFLAG,
                STMTTYPE: this.formData.STMTTYPE,
                MLTYPE: '', // 账单快递方式  只有在“补印账单类型”为“邮寄账单”或“邮寄与电子邮件两者”时填写。其值为银行在CODES(ZDKDT)中的定义。都给空
                KFEFLAG: '', // 账单快递费  只有在“补印账单类型”为“邮寄账单”或“邮寄与电子邮件两者”时填写。空或0：无 1：同城 2：外地 3：海外  都给空
            };
            console.log('==========transPort4003-billDate：' + billDate);
            await this.$post.common.transPort(defaultParams).then((res) => {
                console.log('==========transPort4003-res：', res);
                if (res.status === 200) { // 请求成功
                    const ReprintBill = JSON.parse(res.data.jsonRes);
                    if (ReprintBill.sysHead.rspCd == '000000') { // 交易成功
                        // this.reprintBill_4003 = ReprintBill.body.appBody;
                        // const successMessage = `卡号：${this.formData.CARDNBR} 补印账单申请成功！`;
                        // const ts = `${ReprintBill.sysHead.busiName}提示`;
                        // this.$alert(successMessage, ts, {
                        //     customClass: 'success', type: 'success',
                        // });
                    } else {
                        const ErrorMessage = `错误码：${ReprintBill.sysHead.rspCd} ` + `错误信息：${ReprintBill.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, ReprintBill.sysHead.busiName, {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
                this.centerDialogVisible = false;// 交易完成关闭弹框
            });
        },

        addressEdit() {
            this.$router.push({ path: '/customerInfomationChange/addressEdit' });
        },
        // 关闭页面
        handleClose() {
            closePage(this.$route, this, 1);
        },

        //获取近12个月有账单的账期
        async getLast12MthsAcctPeriod() {
            // 先查询近6个月的
            var query6 = 0;
            // 再查询近7-12个月的
            var query12 = 1;

            var appBody_3054 = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPTION: this.option,
                PINFLAG: this.pinFlag, // 是否检查密码标志
                QUERY: query6,
            };
            var result_3054 = await get_3xxx(
                '3054',
                '卡片信用历史查询',
                appBody_3054,
                this,
                false,
            );

            var queryResList6 = [];
            if (result_3054) {
                queryResList6 = result_3054.body.appBody.dataList || [];
            }

            appBody_3054.QUERY = query12;
            result_3054 = await get_3xxx(
                '3054',
                '卡片信用历史查询',
                appBody_3054,
                this,
                false,
            );
            var queryResList12 = [];
            if (result_3054) {
                queryResList12 = result_3054.body.appBody.dataList || [];
            }

            // 合并查询
            var queryResListAll = queryResList6.concat(queryResList12);
            for (let index = 0; index < queryResListAll.length; index++) {
                const temp = queryResListAll[index];
                if (temp.CLOSEDAY != '00000000') {
                    this.last12MthsList.push(temp.CLOSEDAY);
                }
            }

            console.info('============last12MthsList：', this.last12MthsList);

        },

        // 账单日期多选
        handelCheckboxClosecode(event, code) {
            // if (event) {
            //     this.formData.closeReasonIds.push(code);
            // } else {
            //     this.formData.closeReasonIds.forEach((item, i) => {
            //         if (item === code) {
            //             this.formData.closeReasonIds.splice(i, 1);
            //         }
            //     });
            // }
        },




    },
};
</script>

<style lang='scss' >
.ReprintBillApplyFor {
    /* .el-form-item-span {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
        width: 230px;
        min-width: 200px;
        height: 32px;
        line-height: 32px;
        display: inline-block;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        padding: 0 15px;
    } */
    .el-card__header {
        padding: 8px !important;
    }

    /* .el-form-item-input input,
    .el-input input {
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
    } */

    .text_center {
        text-align: center;
    }
    /* .el-select {
        input {
            max-width: 300px;
            min-width: 150px;
            height: 35px;
            line-height: 35px;
        }
    } */
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-form-item__content {
        text-align: left;
    }
    .el-card {
        border: none;
    }
}
</style>
